<template>
  <div class="app-embed-rate-container">
    <van-rate class="app-embed-rate" :allow-half="allowHalf" :disabled="disabled" color="white" v-model="curValue" />
    <span style="color: #FF6648;font-weight: 600">{{ value }}</span>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from "vue-property-decorator";
import { Rate } from "vant";

Vue.use(Rate);
@Component({
  components: {},
})
export default class AppRate extends Vue {
  /**
   * 评分值
   *
   * @type {string}
   * @memberof AppRate
   */
  @Prop() public value?: string;

  /**
   * 允许半星
   *
   * @type {boolean}
   * @memberof AppRate
   */
  @Prop({ default: true }) public allowHalf?: boolean;

  /**
   * 选中颜色
   *
   * @type {string}
   * @memberof AppRate
   */
  @Prop() public color?: string;

  /**
   * 是否禁用
   *
   * @type {Boolean}
   * @memberof AppRate
   */
  @Prop({default: false}) public disabled?: Boolean;

  /**
   * 获取输入的Value值
   *
   * @type {string}
   * @memberof AppRate
   */
  get curValue() {
    return Number(this.value);
  }

  /**
   * 根据curValue变化抛出事件change
   *
   * @type {string}
   * @memberof AppRate
   */
  set curValue(val: any) {
    this.$emit("change", val.toString());
  }

  public mounted() {
    this.changeLabelStyle();
  }

  /**
   * 修改label默认样式
   * @memberof AppRate
   */
  public changeLabelStyle() {
    document.querySelectorAll(".app-mobile-rate").forEach((element: any) => {
      let prev = this.getNearEle(element, 1);
      if (prev) {
        prev.style.transform = "none";
      }
    });
  }

  /**
   * 查找相邻前一个元素
   *
   *  @memberof AppRate
   */
  public getNearEle(ele: any, type: any) {
    type = type == 1 ? "previousSibling" : "nextSibling";
    var nearEle = ele[type];
    while (nearEle) {
      if (nearEle.nodeType === 1) {
        return nearEle;
      }
      nearEle = nearEle[type];
      if (!nearEle) {
        break;
      }
    }
    return null;
  }
}
</script>
<style lang="less">
.app-embed-rate-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .app-embed-rate {
    .van-rate__item {
      font-size: 15px;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      margin-right: 4px;
      border-radius: 4px;
      background: rgb(224,223,226);
      .van-rate__icon--full {
        background: rgb(255, 128, 99);
        border-radius: 4px;
      }
      .van-rate__icon {
        color: #fff;
        // width: 100%;
        // height: 100%;
        // text-align: center;
        // line-height: 20px;
        &::before {
          content: '\F0C4';
        }
      }
    }
    .van-rate__item:not(:last-child) {
      padding-right: 0px;
    }
  }
}
</style>
